//@ts-nocheck
import React, {useState, useContext, useMemo, memo} from 'react';

const MyContext = React.createContext();

function _Child() {
  console.log('_Counter render');
  const {state, setState} = useContext(MyContext);
  const log = ()=>setTimeout(()=>console.log(state),1500); // 打印的仍然是老的
  return (
    <div>
      child
    </div>
  )
}

/** 使用了useContext的组件,即使使用了memo,即使父组件直接传递给它的属性没有发生改变（下例中<Child/>甚至没有直接接受属性）
 * ,但只要contextのprovider接受的value发生改变,那么这个被memo组件也会渲染*/
const Child = memo(_Child);

export default function App(){
  const [state, setState] = useState(0);
  return (
    <MyContext.Provider className="Provider" value={{state,setState}}>
      <Child/>
      <button onClick={()=>setState(x=>x+1)}>+1</button>
    </MyContext.Provider>
  )
}
